{% extends 'BudgetBudgetBundle::layout.html.twig' %}

{% block stylesheets %}
    {{ form_stylesheet(form) }}
    {% stylesheets '@BudgetBudgetBundle/Resources/public/css/style.css' filter='cssrewrite' output='bundles/budgetbudget/css/style.css'%}
        <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}
    
    {% stylesheets 'bundles/budgetbudget/css/*' filter='cssrewrite' %}
        <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}
    
    {#{% stylesheets '@BudgetBudgetBundle/Resources/public/dist-jstree/themes/default/style.min.css' filter='cssrewrite' output='bundles/budgetbudget/dist-jstree/themes/default/style.min.css' %}
        <link href="{{ asset_url }}" rel="stylesheet" >
    {% endstylesheets %}#}
    
    {% stylesheets 'bundles/budgetbudget/dist-jstree/themes/default/style.min.css' filter='cssrewrite' output='bundles/budgetbudget/dist-jstree/themes/default/style.min.css'%}
        <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}
    
    {% stylesheets 'bundles/budgetbudget/css/jquery-ui.css' filter='cssrewrite' output='bundles/budgetbudget/css/jquery-ui.css'%}
        <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}
        
    {% stylesheets '@BudgetBudgetBundle/Resources/public/jqplot/jquery.jqplot.css' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ form_javascript(form) }}
    
    {% javascripts
        '@BudgetBudgetBundle/Resources/public/js/jquery/i18n.jqGrid.locale-pl.js'
        '@BudgetBudgetBundle/Resources/public/js/jquery/jqGrid.min.js'
        '@BudgetBudgetBundle/Resources/public/js/moment.js'
        '@BudgetBudgetBundle/Resources/public/js/category.js' 
        '@BudgetBudgetBundle/Resources/public/js/expense.js'
        '@BudgetBudgetBundle/Resources/public/js/expenseAdd.js'
        '@BudgetBudgetBundle/Resources/public/js/expenseGrid.js'
        '@BudgetBudgetBundle/Resources/public/js/expenseTree.js' 
        '@BudgetBudgetBundle/Resources/public/js/monthStatisticChart.js' 
        '@BudgetBudgetBundle/Resources/public/js/familyMonth.js' 
    %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
    {#{% javascripts '@BudgetBudgetBundle/Resources/public/js/moment.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}#}

    {% javascripts '@BudgetBudgetBundle/Resources/public/dist-jstree/jstree.min.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
    {#<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>#}
    <script src="{{ asset('bundles/budgetbudget/js/jquery/jquery-ui.js') }}"></script>
    
    {% javascripts '@BudgetBudgetBundle/Resources/public/jqplot/excanvas.js' %}
        <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="{{ asset_url }}"></script><![endif]-->
    {% endjavascripts %}
    
    {% javascripts '@BudgetBudgetBundle/Resources/public/jqplot/jquery.jqplot.min.js'
        '@BudgetBudgetBundle/Resources/public/jqplot/plugins/jqplot.dateAxisRenderer.min.js'
        '@BudgetBudgetBundle/Resources/public/jqplot/plugins/jqplot.canvasTextRenderer.min.js'
        '@BudgetBudgetBundle/Resources/public/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js'
        '@BudgetBudgetBundle/Resources/public/jqplot/plugins/jqplot.pointLabels.min.js'
        '@BudgetBudgetBundle/Resources/public/jqplot/plugins/jqplot.categoryAxisRenderer.min.js'
        '@BudgetBudgetBundle/Resources/public/jqplot/plugins/jqplot.barRenderer.min.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        $( document ).ready(function() {
            var familyMonthObj = new familyMonth('{{ path("BudgetBudgetBundle_family_calculate_motnh") }}');
            familyMonthObj.attachListeners();
            expenseAdd.addInputs();
            expenseAdd.sendData();  
            var options = {
               url: '{{ path("BudgetBudgetBundle_expenses_data_json") }}',
               url_edit: '{{ path("BudgetBudgetBundle_expenses_edit_data_json") }}',
               url_categories: '{{ path("BudgetBudgetBundle_expenses_categories_json") }}',
               url_del: '{{ path("BudgetBudgetBundle_expenses_del") }}',
               categoriesForGrid: '{{ categoriesForGrid }}',
               expensesListData: {{ expensesListData|json_encode|raw }},
               monthChartObj: new monthStatisticChart('chart-month', {{ monthStatistics|json_encode|raw }}),
               familyMonthObj: familyMonthObj
            }
            expenseGrid.getExpensesToJsonJqGrid(options);
            var options = {
               url: '{{ path("BudgetBudgetBundle_planned_expenses_data_json") }}',
               url_edit: '{{ path("BudgetBudgetBundle_planned_expenses_edit_json") }}',
               url_categories: '{{ path("BudgetBudgetBundle_expenses_categories_json") }}',
               url_del: '{{ path("BudgetBudgetBundle_planned_expenses_del") }}',
               url_movie_to_expense: '{{ path("BudgetBudgetBundle_planned_expenses_movie") }}',
               categoriesForGrid: '{{ categoriesForGrid }}',
               plannedExpensesListData: {{ plannedExpensesListData|json_encode|raw }}
            }
            expenseGrid.getPlannedExpensesToJsonJqGrid(options);
            var options = {
                url: '{{ path("BudgetBudgetBundle_expenses_categories_tree_json") }}',
                url_del: '{{ path('BudgetBudgetBundle_categories_del') }}',
                url_rename: '{{ path('BudgetBudgetBundle_categories_rename') }}',
                url_create: '{{ path('BudgetBudgetBundle_categories_new') }}',
                url_get_total_sum: '{{ path("BudgetBudgetBundle_total_sum_json") }}',
                categories: {{ categoriesForTree|json_encode|raw }}
            }
            //console.log(options);
            expenseTree.treeCategory(options, null, 'expenses');
            expense.setMonthVal('{{ familyMonth.year }}', '{{ familyMonth.month }}');
            expense.selectMonth(null);
            expenseAdd.autoCompleteCategory();
            expenseAdd.addPlannedExpense();
            expense.copyExpense('{{ path("BudgetBudgetBundle_planned_expenses_copy") }}');
            
            $('#select-deselect-categories').change(function(){
               expenseTree.selectDeselectAll($(this));
            });
            
            $('#refresh-expense-list').click(function(){
                expenseTree.refreshList();
            });
        }); 
    </script>
{% endblock %}

{% block home_content %}

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-heading"> 
                  <h3 class="panel-title">Kategorie</h3>
                </div>
                <div class="panel-body">
                  <div id="tree-category"></div>
                    <div id="manage-categories-box" class="input-group">
                        <span class="input-group-addon">
                          <input type="checkbox" checked="checked" id="select-deselect-categories">
                        </span>
                        <label for="select-deselect-categories" class="form-control">Zaznacz/odznacz wszystkie</label>
                    </div>
                  <button class="btn btn-primary" id="refresh-expense-list">Odśwież listę wydatków</button>
                  <div>
                      <br /><button class="btn btn-success" id="addMainCategory">Dodają główną kategorię</button>
                  </div>
                </div>
            </div>
            <div  class="panel panel-default">
                <div class="panel-heading"> 
                  <h3 class="panel-title">Suma wydatków</h3>
                </div>
                <div id="grouped-expenses" class="panel-body"> 
                  {% include 'BudgetBudgetBundle:Expense:_grouped_expenses.html.twig' with {'groupedExpenses': groupedExpenses}%}
                </div>
            </div>
        </div>
        <div class="col-sm-9">    
            <div class="panel panel-default">
                <div class="panel-heading"> 
                  <h3 class="panel-title">
                      <span>Wybierz miesiąc</span>
                      <span class="glyphicon glyphicon-chevron-left select-month-left" style="margin:0 5px; cursor: pointer;"></span>
                      <input type="text" id="select-month" readonly>
                      <span class="glyphicon glyphicon-chevron-right select-month-right" style="cursor: pointer;"></span> 
                      <span id="month-info-msg">Okres:</span>
                      <span id="month-info">{{ period }}</span>
                      <button class="btn btn-success btn-xs" id="calculateMonthButton">Wykonaj rozliczenie miesiąca</button>
                  </h3>
                </div>
                <div class="panel-body">
                    {#
                    <table class="table table-hover">
                        <tr>
                            <td>Suma wydatków</td>
                            <td><span id="statistics-expenses-sum"></span></td>
                        </tr>
                        <tr>
                            <td>Zaoszczędzono</td>
                            <td><span id="statistics-saving-sum"></span></td>
                        </tr>
                    </table>
                    #}
                    <div id="chart-month" style="height: 200px;"></div>
                </div>
            </div>
            
            {% include 'BudgetBudgetBundle:Expense:list.html.twig' %}      
            
            <div class="panel panel-default">
                <div class="panel-heading"> 
                    <h3 class="panel-title panel-custom">Wprowadź wydatki<span id="add-expense-btn"></span>
                    <button class="btn btn-primary btn-xs" id="add-expense-row-btn">Dodaj wiersz</button>
                    </h3>
                    
                </div>
                <div id="define-expense-panel" class="panel-body">    
                    
                    {{ form_errors(form) }}       
                    {{ form_start(form, { 'attr' : {'id' : 'expensesForm'} }) }}
                        <ul id="define-expense-panel-list"  class="expenses" data-prototype="{% filter escape %}{% include 'BudgetBudgetBundle:Expense:prototype.html.twig' with { 'expense': form.expenses.vars.prototype } %}{% endfilter %}">
                            {% for expense in form.expenses %}
                               <li class="form-inline">
                                   <div class="form-category form-group">
                                     <div class="ui-widget">
                                       {{ form_row(expense.category, { 'label' : ' ', 'attr' : {'id' : 'combobox', 'class' : 'small-input-expense'} }) }}
                                     </div>
                                   </div>
                                   <div class="form-price form-group">
                                     {{ form_row(expense.price, { 'label' : ' ', 'attr' : {'placeholder' : 'Price', 'class' : 'price'} }) }}
                                   </div>
                                   <div class="form-comment form-group">
                                     {{ form_row(expense.comment, { 'label' : ' ', 'attr' : {'placeholder' : 'Comment', 'class': 'expense-comment'} }) }}
                                   </div>                     
                                   <div class="form-date form-group small-input-expense">
                                     {{ form_row(expense.date, { 'label' : ' ' }) }}
                                   </div>
                               </li>
                            {% endfor %}
                        </ul>
                        <p id="save-expenses-box" class="text-right">
                            <button type="submit" class="btn btn-primary" id="btn-send-ajax">Zapisz wydatki</button>
                            <div class="small-ajax-loader"></div>
                        </p>
                        {{ form_rest(form) }}
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
</div>
    
{% endblock %}                   
            
                

